<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<title>满屋花</title>
		<style type="text/css">
			body{  
			    background-color: #FFD8D9;  
			    text-align:center;  
			    font-size:12px;
			    margin:10px 0px 0px 0px;  
			    padding:0px;   
			}  
			#title img{
				width:700px ;
			} 
			.container{  
			    position:relative;
				
			    margin:0px auto;  
			    width:800px;  
			    text-align:left;  
			}  
			#bar{  
			    margin:0px;   
			    padding:0px;  
			}  
  
			#bar ul{  
			    list-style:none;  
			    padding:0px;  
			    margin:0px;  
			}  
			#bar li{ 
				text-align:center;  
			    float:left;  
			     
			    width:100px;  
			}  
			#bar a{  
			    display:block;  
			    padding:9px 6px 11px 6px;  
			    /*background:url(img/button_bar.jpg) no-repeat;  */
			   /*渐变色*/
			   background: linear-gradient(180deg,#FFCED2,#FFF6F7,#FFFFFF);
			    margin:0px;  
			}  
			#bar a:link,#bar a:visited{  
			    color:black;  
			    text-decoration:none;  
			}  
			#bar a:hover{  
			    color:blueviolet;  
			    text-decoration:underline;  
			    font-size: 12px;
			}  
			#left{  
			    width:180px;  
			    float:left;
				
			    background:#FFFFFF url(leftbottom.jpg) no-repeat;  
			    margin:10px 0px 0px 0px;
			    border-radius:20px ;  
			}  
			#login{  
			    background:url(img/login.jpg) no-repeat;  
			    padding:38px 0px 10px 0px;  
			}  
			#login form{  
			    padding:0px;  
			    margin:0px;  
			}  
			#login p{  
			    margin:1px;  
			    text-align:left;  
			    padding:5px 0px 0px 25px;  
			}  
			
			#login form input.text{  
			    border-bottom:1px solid black;
			    /*设置文本框的左右上的线没有*/  
			    border-left:none;
			    border-right:none;  
			    border-top:none;  
			    padding:0px;
			    width:90px;  
			}  
			#login form input.btn{  
			    border:1px solid #000000;  
			    background-color:#FFEFF0;  
			    height:17px;  
			    padding:0px;  
			}  
			#login p a:link,#login p a:visited{  
			    color:#333333;  
			    text-decoration:none;  
			}  
			#login p a:hover{  
			    color:#000088;  
			    texe-decoration:underline;  
			}  
			   
			#category{  
			    background:url(img/fenlei.jpg) no-repeat;  
			    padding:50px 0px 35px 0px;  
			}  
			   
			#category h4{  
			    margin:0px 18px;  
			    padding:3px 0px 1px 5px;  
			    background-color: #FFD1D1;  
			    font-size:12px;  
			}  
			#category ul{  
			    list-style:none;  
			    margin:0px;  
			    padding:5px 22px 15px 22px;  
			}  
			   
			#category  ul li{  
			    padding:2px 0px 2px 16px;  
			    border-bottom:1px dashed red;  
			    background:url(img/dian.gif) no-repeat 5px 7px;  
			}  
			   
			#category ul li a:link , #category ul li a:visited{  
			    color:black;  
			    text-decoration:none;  
			}  
			#category ul li a:hover{  
			    color:blue;  
			    text-decoration:underline;  
			}  
			#right{  
			    float:left;  
			    width:520px;  
			    margin:0px 0px 0px 1px;  
			}  
			#top{
				border-radius:21px ; 
			    background:pink url(img/new.jpg) no-repeat;
			    padding:1px 0px 0px 1px; 
			    margin-left:0px;
			    margin-top: 10px;
			    margin-bottom: 15px;
			}  
			#top img{  
			    border:none;
				 
			    padding-left:0px;  
			}
			#top ul li{
				/*去点*/
				display: inline;	
			} 
			#top ul li img{
				/*图片太大就需要设置宽度*/
				
				width: 149px;
				
			} 
			#recommend{
				border-radius:21px ;   
			    background:url(img/recommend.jpg) no-repeat;  
			    margin:5px 0px 0px 0px;  
			    padding:35px 0px 0px 0px;  
			    background-color:#ffffff;  
			    margin-bottom: 20px;
			}  
			#recommend br, #new br,#buttom br{  
			    display:block;  
			    clear:both;  
			    margin:0px;  
			    padding:0px;  
			}  
			#recommend ul , #new ul{  
			    list-style:none;  
			    margin:0px;  
			    padding:5px 5px 5px 8px;  
			}  
			#recommend ul li,#new ul li{  
			    text-align:center;  
			    float:left;  
			    width:125px;  
			}  
			#recommend ul li img , #new ul li img{  
			    border:none;  
			    margin:5px 0px 3px 0px;  
			    padding:0px;  
			}  
			#recommend ul li a:link, #recommend ul li a:visited , #new ul li a:link,#new ul li a:visited{  
			    color:#666666;  
			    text-decoration:none;  
			}  
			#recommend ul li a:hover , #new ul li a:hover{  
			    color:#D20005;  
			    text-decoration:underline;  
			}  
			#new{
				border-radius:21px ;   
			    background:url(img/new.jpg) no-repeat;  
			    margin:5px  0px 0px 0px;  
			    padding:35px 0px 0px 0px;  
			    background-color:#FFFFFF;  
			}  
			#buttom{
				border-radius:25px ;   
			    background:url(img/daogou.jpg) no-repeat;  
			    margin:5px 0px 10px 0px;  
			    padding:45px 0px 35px 0px;  
			    background-color:#FFFFFF;
			    font-size: 15px; 
			    margin-top: 10px; 
			}  
			#buttom ul{  
			    list-style:none;  
			    margin:0px;  
			    padding:5px 5px 5px 30px;  
			}  
			#buttom ul li{
			 	/*设置文字前面的箭头  通过添加图片来处理 */
			    background:url(img/jiantou.jpg) no-repeat 5px 6px; 
			    padding:1px 0px 1px 12px;  
			    float:left;  
			    width:220px;  
			}  
			#buttom ul li a:link,#buttom ul li a:visited{  
			    color:#222222;  
			    text-decoration:none;  
			}  
			#buttom ul li a:hover{  
			    color:#8A2BE2; 
			    /*当鼠标放在文本上面的时候会显示一根线*/ 
			    text-decoration:underline;  
			} 
			
		</style>
	</head>

	<body>
		<div class="container">
			<div id="title"><img src="img/banner.jpg"></div>
			<!--导航栏-->
			<div id="bar">
				<ul>
					<li>
						<a href="#">鲜花礼品</a>
					</li>
					<li>
						<a href="#">自助订花</a>
					</li>
					<li>
						<a href="#">绿色植物</a>
					</li>
					<li>
						<a href="#">花之物语</a>
					</li>
					<li>
						<a href="#">会员中心</a>
					</li>
					<li>
						<a href="#">联系我们</a>
					</li>
					<li>
						<a href="#">支付方式</a>
					</li>
				</ul>
			</div>
			
			<!--左边的一列-->
			<div id="left">
				<!--登录表单-->
				<div id="login">
					<form>
                    <p>&nbsp;</br>
                    
                    </p>
						<p>
							用户：<input type="text" name=""  value="" class="text">
						</p>
						<p>
							密码：<input type="text" name=""  value="" class="text"/>
						</p>
						<p>
							<input type="button" class="btn" value="登录"/>
							<input type="button" class="btn" value="注册"/><a href="#">忘记密码</a>
						</p>
					</form>
				</div>
				
				<!--鲜花分类-->
				<div id="category">
					<h4><span>用途</span></h4>
					<ul>
						<li>
							<a href="#">爱情鲜花</a>
						</li>
						<li>
							<a href="#">生日送花</a>
						</li>
						<li>
							<a href="#">新年鲜花</a>
						</li>
						<li>
							<a href="#">家庭用花</a>
						</li>
						<li>
							<a href="#">亲情用花</a>
						</li>
						<li>
							<a href="#">道歉鲜花</a>
						</li>
						<li>
							<a href="#">探望祝福</a>
						</li>
						<li>
							<a href="#">开业花篮</a>
						</li>
						<li>
							<a href="#">会议用花</a>
						</li>
					</ul>
					
					<!--花材-->
					<h4><span>花材</span></h4>
					<ul>
						<li>
							<a href="#">玫瑰花</a>
						</li>
						<li>
							<a href="#">百合花</a>
						</li>
						<li>
							<a href="#">郁金香</a>
						</li>
						<li>
							<a href="#">太阳花</a>
						</li>
						<li>
							<a href="#">康乃馨</a>
						</li>
						<li>
							<a href="#">马蹄兰</a>
						</li>
						<li>
							<a href="#">扶朗</a>
						</li>
						<li>
							<a href="#">剑兰</a>
						</li>
					</ul>
					<!--价格-->
					<h4><span>价格</span></h4>
					<ul>
						<li>
							<a href="#">100~200元</a>
						</li>
						<li>
							<a href="#">200~300元</a>
						</li>
						<li>
							<a href="#">300~400元</a>
						</li>
						<li>
							<a href="#">400~500元</a>
						</li>
						<li>
							<a href="#">500~600元</a>
						</li>
						<li>
							<a href="#">600~800元</a>
						</li>
						<li>
							<a href="#">800元以上</a>
						</li>
					</ul>
				</div>
			</div>
			
			<!--右边部分-->
			<div id="right">
				<!--上面-->
				<div id="top">
					<ul>
						<li >
                        <img src="img/news1.jpg"></li>	
						<li >
                        <img src="img/news2.jpg"></li>
						<li >
                        <img src="img/news3.jpg"></li>
					</ul>
				</div>
				
				
				<!--推荐部分-->
				<div id="recommend">
					<ul>
						<li>
							<a href="#"><img src="img/flower1.jpg"><br/>
					  幸福的味道</a><br/>￥288元></li>
						<li>
							<a href="#"><img src="img/flower2.jpg"><br/><br/>
					  阳光守护你</a><br/>￥300元</li>
						<li>
							<a href="#"><img src="img/flower3.jpg"><br/><br/>
					  温情永远</a><br/>￥268元</li>
						<li>
							<a href="#"><img src="img/flower4.jpg"><br/><br/>
					  爱无界</a><br/>￥318元></li>
						<li>
							<a href="#"><img src="img/flower5.jpg"><br/><br/>
					  亲亲宝贝</a><br/>￥368元</li>
						<li>
							<a href="#"><img src="img/flower6.jpg"><br/><br/>
					  相信是缘</a><br/>￥188元</li>
						<li>
							<a href="#"><img src="img/flower7.jpg"><br/><br/>
					  水晶童话</a><br/>￥198元></li>
						<li>
							<a href="#"><img src="img/flower8.jpg"><br/><br/>
					  天使之爱</a><br/>￥268元</li>
					</ul>
					<br/>
				</div>
				<div id="new">
					<ul>
						<li>
                        <img src="img/flower9.jpg">
							<a href="#"><br/>
						  粉色迷情</a>
					  </li>
						<li>
                        <img src="img/flower10.jpg">
							<a href="#"><br/>
						  海岸的优雅</a>
					  </li>
						<li>
                        <img src="img/flower11.jpg">
							<a href="#"><br/>
						  百年地中海</a>
					  </li>
						<li>
                        <img src="img/flower12.jpg">
							<a href="#"><br/>
						  爱要说出口</a>
					  </li>
					</ul>
					<br>
				</div>
				<div id="buttom">
					<ul>
						<li>
						  <a href="#"> 各种鲜花所代表的含义</a>
						</li>
						<li>
							<a href="#">花的喜怒哀乐与人的各种感觉</li>
						<li>
							<a href="#">养花与养生之道</li>
						<li>
							<a href="#">每天清晨的第一缕阳光</li>
						<li>
							<a href="#">花香的味道</li>
						<li>
							<a href="#">世界各地关于送花的习俗</li>
						<li>
							<a href="#">手捧一束鲜花的等待</li>
					</ul>
					<br>
				</div>
			</div>
		</div>
	</body>
</html>
